<template>
   <div class="shopitem">
    <div class="shopitem-top">
       <div class="shopitem-top-left">
         <input type="checkbox"  :checked="check" @change="toggleCheck({id})" name="" id="">
         <img :src="photo[0].url" alt="">
       </div>
       <div class="shopitem-top-right">
         <h4>{{title}}</h4>
         <p>销量：{{saleNum}}</p>
         <p><span>￥<b>{{price}}</b></span><span>x<b>{{count}}</b></span></p>
       </div>
     </div>
     <div class="shopitem-bottom">
      <van-stepper :value="count"  input-width="30px" @change="countChange"/>
      </div>
     </div>
</template>

<script>
import {
  mapMutations
} from 'vuex'
export default {
  name: 'shopCartItem',
  methods: {
    ...mapMutations(['toggleCheck']),
    // 提交一个mutation来修改num和id来修改count
    countChange (num) {
      this.$store.commit('changeCountById', { id: this.id, num })
      console.log({ id: this.id, num })
    }
  },
  props: ['id', 'title', 'price', 'photo', 'check', 'count', 'saleNum']
  // props: {
  //   id: {
  //     type: Number,
  //     required: true
  //   },
  //   title: {
  //     type: String,
  //     required: true
  //   },
  //   price: {
  //     price: Number,
  //     required: true
  //   },
  //   photo: {
  //     type: Array,
  //     required: true
  //   },
  //   check: {
  //     type: Boolean,
  //     required: true
  //   },
  //   count: {
  //     type: Number,
  //     required: true
  //   },
  //   saleNum: {
  //     type: Number,
  //     required: true
  //   }
  // }
}
</script>

<style lang="scss" scope>
.shopgroup{
  flex: 1;
  overflow-x: hidden;
  height: 100%;
  background-color: rgba(238, 237, 237, 0.89);
}
.shopitem{
 width: 100%;
 display: flex;
 flex-direction:column;
 background-color: white;
 box-sizing: border-box;
 margin-top:10px;
 padding: 10px 10px;
 &-top{
   font-style: normal;
   font-weight: normal;
   display: flex;
   img{
     margin-left: 5px;
     margin-right: 5px;
     width: 85px;
     height: 85px;
   }
   &-left{
     display: flex;
     align-items: center;
   }
   &-right{
     flex: 1;
     display: flex;
     flex-direction:column;
     justify-content: space-between;
     h4{
       font-weight: normal;
       font-size: 12px;
       color: #cccccc;
     }
     p{
         font-size: 12px;
       &:last-child{
         display: flex;
         justify-content: space-between;
         align-items: center;
         width: 100%;
         span{
            font-size: 12px;
            &:first-child{
              b{
                font-size: 15px;
                color: red;
                font-weight: normal;
              }
          }
         }
       }
     }
   }
 }
 &-bottom{
   margin-top: 5px;
   height: 20px;
   display: flex;
   flex-direction: row;
   align-self: flex-end;
   .van-stepper{
     display: flex;
   .input_with{
     width: 20px;
   }
   }
 }
}
</style>
